<template>
    <el-card>
        <CategorySelector :isDiabled="isShow"></CategorySelector>
        <el-card style="margin-top:20px" v-if="!isShow">
            <el-button type="primary" size="small" @click="toAddAttr" :disabled="!category3Id">+&nbsp;添加属性</el-button>
            <el-table :data="attrList" border style="width: 100%">
                <el-table-column type="index" label="序号" width="180" align="center">
                </el-table-column>
                <el-table-column prop="attrName" label="属性名称" width="180">
                </el-table-column>
                <el-table-column label="属性值列表">
                    <template v-slot="{ row }">
                        <el-tag type="success" v-for="attrValue in row.attrValueList" :key="attrValue.id"
                            style="margin-right:6px">{{ attrValue.valueName }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{ row }">
                        <el-tooltip class="item" effect="dark" content="修改属性" placement="top-start">
                            <el-button type="primary" size="small" @click="updateAttr(row)">修改属性</el-button>
                        </el-tooltip>
                        <el-popconfirm title="这是一段内容确定删除吗？" confirm-button-text="Yes" cancel-button-text="No"
                            @onConfirm="deleteConfirm(row.id)">
                            <template #reference>
                                <div style="display: inline-block;margin-left: 10px">
                                    <el-tooltip class="item" effect="dark" content="删除属性" placement="top-start">
                                        <el-button type="danger" size="small">删除属性</el-button>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card v-else style="margin-top:20px">
            <el-form ref="form" :model="attrInfo" style="width:300px">
                <el-form-item label="属性名">
                    <el-input v-model="attrInfo.attrName" placeholder="请输入属性名" wdith="200px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="toAddAttrValue">添加属性值</el-button>
                    <el-button type="default" @click="isShow = false">取消</el-button>
                </el-form-item>
                <el-table :data="attrInfo.attrValueList" border>
                    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                    <el-table-column label="属性值名称">
                        <template v-slot="{ row, $index }">
                            <el-input size="small" v-model="row.valueName" v-if="row.isShowInput" ref="inputName"
                                @blur="toDeleteCurrentRow(row, $index)"></el-input>
                            <span v-else @dblclick="toEditAttrValue(row, $index)">{{ row.valueName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template v-slot="{ $index }">
                            <el-button type="danger" size="small" @click="deleteAttrValue($index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-form-item style="margin-top:10px">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="isShow = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-card>
</template>

<script>
import CategorySelector from '@/components/CategorySelector/index.vue'
import { mapState } from 'vuex';
import { reqGetAttrListDataByCategory3Id, reqAddAttrInfo, reqDeleteAttrInfo } from '@/api/product/attr'
export default {
    name: 'Attr',
    components: { CategorySelector },
    data() {
        return {
            attrList: [], //属性列表数据
            isShow: false,
            attrInfo: {
                attrName: '', // 要存储的属性名
                attrValueList: [], // 存储属性值的数组
                categoryLevel: 3, // 等级
                categoryId: -1 // id值
            },
            index: 0,

        }
    },
    computed: {
        //计算属性数据
        ...mapState('attr', ['category1Id', 'category2Id', 'category3Id'])
    },
    watch: {
        //当三级id发生变化时，获取属性列表数据渲染至页面
        category3Id: {
            immediate: true,
            async handler(newval, oldval) {
                if (!this.category3Id) {
                    this.attrList = []
                    return
                }
                this.getAttrListDataByCategory3Id()
            }
        },
    },
    methods: {
        //根据三级分类id获取列表数据
        async getAttrListDataByCategory3Id() {
            const { category1Id, category2Id, category3Id } = this
            const result = await reqGetAttrListDataByCategory3Id({ category1Id, category2Id, category3Id })
            if (result.code === 200) {
                this.attrList = result.data
            }
        },
        //添加属性
        toAddAttr() {
            this.isShow = true
            this.attrInfo.attrName = ''
            this.attrInfo.attrValueList = []
            delete this.attrInfo.id
        },

        //添加属性值
        toAddAttrValue() {
            this.attrInfo.attrValueList.push({
                valueName: '',
                isShowInput: true
            })
            this.$nextTick(() => {
                this.$refs.inputName.focus()
            })

        },

        //失去焦点时
        toDeleteCurrentRow(row, index) {
            if (!row.valueName) {
                this.attrInfo.attrValueList.splice(index, 1)
                return
            }
            row.isShowInput = false

        },

        //去修改属性值
        toEditAttrValue(row) {
            this.$set(row, 'isShowInput', true)
            // row.isShowInput = true
            this.$nextTick(() => {
                this.$refs.inputName.focus()
            })
        },

        //删除属性值
        deleteAttrValue(index) {
            this.$confirm('是否删除属性?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.attrInfo.attrValueList.splice(index, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //保存
        async onSubmit() {
            this.attrInfo.categoryId = this.$store.state.attr.category3Id
            const result = await reqAddAttrInfo(this.attrInfo)
            if (result.code === 200) {
                this.$message.success(`${this.attrInfo.id}? '修改属性值成功':'添加属性值成功'`)
            }
            this.isShow = false
            //重新根据三级分类id获取列表数据
            this.getAttrListDataByCategory3Id()

        },

        //修改属性
        updateAttr(row) {
            //数据回显
            Object.assign(this.attrInfo, row)
            this.isShow = true
        },

        //删除属性
        async deleteConfirm(rowId) {
            // console.log('11')
            await reqDeleteAttrInfo(rowId)
            this.$message.success('删除成功')
            //重新根据三级分类id获取列表数据
            this.getAttrListDataByCategory3Id()
        }

    }
}
</script>

<style></style>